<template>
  <div class="zhao_che_item flex-row flex-wrap">
    <vue-img :src="user.avatar" class="icon"></vue-img>
    <div class="info flex-grow-limit">
      <header class="flex-row flex-vertical-center flex-wrap">
        <div class="row1 flex-row flex-between flex-vertical-center">
          <span class="text-limit">{{ data.exchange_address }}</span>
          <img src="@img/btn/more.png" class="moreBtn" v-if="visibleMoreBtn" width="24px"
          @click.capture="$emit('clickMore', $event, data.id)">
        </div>
        <!-- <div class="content flex-oneline">{{ user.nick_name }}</div> -->
      </header>
    </div>
    <div class="type flex-oneline flex-row flex-between" style="position: relative; bottom: 25px">
      <span>{{ data.shift_type_str }}</span>
      <span class="color-subtext">{{ data.created_at | date }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data', 'visibleMoreBtn'],

  data (){
    return {

    }
  },

  computed: {
    user (){
      return this.data.user
    }
  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
.zhao_che_item{
  border-radius: 8px;
  background-color: white;
  padding: 15px;
  box-sizing: border-box;
  margin-top: 5px;
  height: 85px;
  position: relative;
  bottom: 5px;

  .info{
    margin-left: 10px;
  }

  .icon{
    width: 55px;
    height: 55px;
    border-radius: 50%;
  }

  .row1{
    font-size: 18px;
    .text-limit;

    @media screen and (max-width: 330px){
      font-size: 16px;
    }
  }

  .row2, .content{
    font-size: 14px;
    color: @subtext;
  }

  .content{
    margin-top: 5px;
  }

  .type{
    margin-left: 65px;
    margin-top: 5px;
    color: @danger;
  }
}
</style>
